<template>
  <div class="com-time-range">
    <el-date-picker
      v-model="start_time"
      placeholder="开始时间"
      :default-value="defaultStartValue"
      popper-class="common-time-range-popper"
      class="com-time-range-item"
      value-format="yyyy-MM-dd HH:mm:ss"
      type="datetime"
      prefix-icon="el-icon-date"
      :picker-options="startPickerOptions"
      @change="startTimeChange"
    />
    <span class="separator">~</span>
    <el-date-picker
      v-model="end_time"
      :default-value="defaultEndValue"
      placeholder="结束时间"
      popper-class="common-time-range-popper"
      class="com-time-range-item"
      value-format="yyyy-MM-dd HH:mm:ss"
      type="datetime"
      prefix-icon="el-icon-date"
      :picker-options="endPickerOptions"
      @change="endTimeChange"
    />
  </div>
</template>

<script>
// 获取选择天数已经过去的毫秒数
import { parseTime } from '@/utils'
// 通用时间选择框
export default {
  name: 'ComTimeRange',
  props: {
    // 双向绑定的值
    value: {
      type: [String, Array],
      default() {
        return []
      }
    },
    // 可选时间范围,单位-秒,默认24h
    timeRange: {
      type: [String, Number],
      default: 86400
    },
    // 是否启用时间范围禁用的校验
    useTimeRange: {
      type: Boolean,
      default: false
    },
    size: {
      type: [String, Number],
      default() {
        return 38
      }
    }
  },
  data() {
    return {
      start_time: '',
      end_time: '',
      startPickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
        // selectableRange: '00:00:00 - 23:59:59'
      },
      endPickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
        // selectableRange: '00:00:00 - 23:59:59'
      }
    }
  },
  computed: {
    defaultStartValue() {
      if (this.useTimeRange && this.end_time) {
        const time = new Date(this.end_time).getTime() - this.timeRange * 1000
        return parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
      }
      return ''
    },
    defaultEndValue() {
      if (this.useTimeRange && this.start_time) {
        const time = new Date(this.start_time).getTime() + this.timeRange * 1000
        return parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
      }
      return ''
    }
  },
  watch: {
    value: {
      // deep: true,
      handler(val) {
        this.start_time = val[0] || ''
        this.end_time = val[1] || ''
      }
    },
    start_time: {
      handler(val) {
        const { timeRange, useTimeRange } = this
        this.endPickerOptions = {
          disabledDate(time) {
            // TODO 如果没有值，需要恢复可选择的状态
            const max = new Date(val).getTime() - 8.64e7 + 1
            // 符合条件的时间
            time = time.getTime()
            const time1 = (new Date(val).getTime() + timeRange * 1000)
            const min = (useTimeRange && val) ? (Date.now() < time1 ? Date.now() : time1) : Date.now()
            return time < max || time > min
          }
        }
      }
    },
    end_time: {
      handler(val) {
        const { timeRange, useTimeRange } = this
        this.startPickerOptions = {
          disabledDate(time) {
            if (!val) {
              return time.getTime() > Date.now()
            }
            // TODO 如果没有值，需要恢复可选择的状态
            const time1 = new Date(val).getTime()
            // 当前时间
            time = time.getTime()
            const start = new Date(val).getTime() - timeRange * 1000
            const min = time1 > Date.now() ? Date.now() : time1
            return time > min || (useTimeRange && time < start)
          }
        }
      }
    }
  },
  methods: {
    // 开始时间的变化
    startTimeChange(val) {
      if (this.end_time && val && (new Date(val).getTime() > new Date(this.end_time).getTime())) {
        this.start_time = ''
        this.$message.warning('开始时间不能小于结束时间')
      }
      this.update()
    },
    // 结束时间的变化
    endTimeChange(val) {
      if (this.start_time && val && (new Date(val).getTime() < new Date(this.start_time).getTime())) {
        this.end_time = ''
        this.$message.warning('结束时间不能大于开始时间')
      }
      this.update()
    },
    // 更新数据
    update() {
      const range = [this.start_time || '', this.end_time || '']
      this.$emit('input', range)
      this.$emit('change', range)
    }
  }
}
</script>

<style scoped lang="scss">
.com-time-range {
  .separator {
    color: #666;
    padding: 0 5px;
  }
}
</style>
